<template>
  <div class="player-wrap">
    <div class="player-content">
      <video class="video"
        id="videoPlayer"
        :src="url"
        playsinline
        webkit-playsinline
        :poster="poster | formatImage(posterSize)"
        controls
      ></video>
      <!-- <div class="overlay">
        <div class="controls">
          <img v-if="posterVisible" class="poster" :src="poster | formatImage(posterSize)" @click="toggle"/>
          <span v-if="posterVisible" class="duration" @click="toggle">{{ duration | formatTime }}</span>
          <div class="control" v-show="!playing" :class="{'active': !posterVisible}" @click="toggle"><i class="fa fa-play"></i></div>
          <div class="control" v-show="playing" :class="{'active': !posterVisible}" @click="toggle"><i class="fa fa-pause"></i></div>
        </div>
      </div> -->
    </div>
    <div v-if="!canPlay" class="player-mask" v-html="maskInfo"></div>
  </div>
</template>

<script>
import { formatImage, formatTime } from '@/filters/filters.js'

export default {
  name: 'VideoPlayer',
  props: {
    url: {
      type: String
    },
    poster: {
      type: String
    },
    posterSize: {
      type: String,
      default: '@480w_270h'
    },
    duration: {
      type: [Number, String]
    },
    canPlay: {
      type: Boolean,
      default: true
    },
    maskInfo: {
      type: String
    }
  },
  data () {
    return {
      videoCtx: null,
      playing: false,
      posterVisible: true
    }
  },
  filters: {
    formatImage,
    formatTime
  },
  mounted () {
    this.videoCtx = document.querySelector('#videoPlayer')
  },
  beforeDestroy () {
    this.videoCtx.pause()
  },
  methods: {
    toggle () {
      if (this.playing) {
        this.videoCtx.pause()
        this.$emit('pause')
      } else {
        this.videoCtx.play()
        this.posterVisible = false
        this.$emit('play')
      }
      this.playing = !this.playing
    }
  }
}
</script>

<style lang="scss" scoped>
  .player{
    &-wrap{
      position: relative;
      padding-top: 270/480*100%;
      background: {
        color: $color-grey;
        size: 36%;
        image: url('~@/assets/placeholder.png');
        repeat: no-repeat;
        position: 50%;
      }
    }
    &-content {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      .video{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
      .overlay{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        user-select: none;
        transform: translateZ(0);
      }
      .controls {
        display: block;
        position: absolute;
        z-index: 3;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        cursor: pointer;
        text-align: center;
        .poster {
          display: block;
          width: 100%;
          height: 100%;
        }
        .duration {
          position: absolute;
          left: rem(10px);
          bottom: rem(15px);
          z-index: 2;
          display: block;
          border: 1px solid rgba(255,255,255,.6);
          background-color: rgba(255,255,255,.2);
          padding: {
            left: rem(8px);
            right: rem(8px);
          }
          color: #fff;
          font-size: rem(12px);
          line-height: rem(20px);
          text-align: center;
          border-radius: rem(2px);
        }
        .control{
          position: absolute;
          right: rem(10px);
          bottom: rem(10px);
          z-index: 2;
          color: #fff;
          .fa {
            font-size: rem(40px)
          }
          text-shadow: 2px 4px 10px rgba(0,0,0,.5);
          &.active{
            opacity: 0.5;
            bottom: rem(28px)
          }
        }
      }
    }
    &-mask {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-size: rem(14px);
      width: 100%;
      height: 100%;
      color: $color-white;
      background-color: rgba(0,0,0,.5);
    }
  }
</style>
